<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am using runoob</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
<style>
.class1{
  background: #444;
  color: #eee;
}
button{
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
  <button @click="counter += 1">增加1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>

  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">点我</button>

  <button @click="say('hi')">Say hi</button>
  <button @click="say('what')">Say what</button>

  <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
  <button @click="one($event), two($event)">nothing</button>

  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>input 表单消息是: {{ message }}</p>

  <p>textarea 元素：</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
  <p>textarea 表单消息是:</p>
  <p style="white-space: pre">{{ message2 }}</p>

  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>

  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>

  <br>
  <input type="radio" id="runoob111" value="Runoob" v-model="picked">
  <label for="runoob111">Runoob</label>
  <input type="radio" id="google111" value="Google" v-model="picked">
  <label for="google111">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
  <br>


  <select v-model="selected" name="site">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>

  <select v-model="selected0" name="fruit" multiple>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
    <option value="www.taobao.com">Taobao</option>
  </select>
 
  <div id="output0">
      选择的网站是: {{selected0}}
  </div>
</div>

<script>
const app = {
  data() {
    return {
      use: false,
      ok: true,
      message: 'RUNOOB!!',
      id: 1,
      counter:0,
      name: 'hello world',
      message: '',
      message2: '菜鸟教程\r\nhttps://www.runoob.com',
      checked : false,
      checkedNames: [],
      picked : 'Runoob',
      selected: '' ,
      selected0: '' 
    }
  },
  methods:{
    greet(event){
        // `methods` 内部的 `this` 指向当前活动实例
        alert('Hello'+this.name+"!")
        // `event` 是原生 DOM event
        if(event){
            alert(event.target.tagName)
        }
    },
    say(message){
        alert(message)
    },
    one(event) {
      alert("第一个事件处理器逻辑...")
    },
    two(event) {
      alert("第二个事件处理器逻辑...")
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>
</html>